<script setup lang="ts">
import {onMounted, reactive} from "vue";
import {PageUserReqVO, PageUserRespVO} from "@/interface/user.ts"
import {usePageUserApi} from "@/services/api";
import {Page} from "@/interface/base.ts";
import Breadcrumb from "@/components/breadcrumb/Breadcrumb.vue";


const pageUserReq: PageUserReqVO = reactive({
  size: 10,
  current: 1,
})
const userTableData: Page<PageUserRespVO> = reactive({
  list: [],
  total: 0
})
const onSubmit = () => {
  loadData()
}
const loadData = async () => {
  const {data: res} = await usePageUserApi(pageUserReq);
  if (!res || !res.target) {
    userTableData.list = res.list
    userTableData.total = res.total
  }
}
const handleSizeChange = () => {
  pageUserReq.current =1
  loadData()
}
const handleCurrentChange = (val: number) => {
  pageUserReq.current =val
  loadData()
}
onMounted(() => {
  loadData()
})
</script>

<template>
  <div class="container">
    <div class="breadcrumb">
      <breadcrumb></breadcrumb>
    </div>
    <div class="search">
      <el-form :inline="true" :model="pageUserReq" class="demo-form-inline">
        <el-form-item label="片名">
          <el-input v-model="pageUserReq.username" placeholder="账号" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="padding: 10px">
      <el-table :data="userTableData.list" style="width: 100%">
        <el-table-column prop="id" label="id" width="180"/>
        <el-table-column prop="username" label="账号" width="180"/>
      </el-table>
    </div>
    <div class="demo-pagination-block">
      <el-pagination
          v-model:current-page="pageUserReq.current"
          v-model:page-size="pageUserReq.size"
          :page-sizes="[10, 20, 30, 40]"
          :small="false"
          :disabled="false"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="userTableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style scoped>
.container {
  flex: 1;
  background-color: #fdfdfd;
  padding: 20px;
}

.search {
  padding: 10px;
}

.pagination {
  padding: 20px;
}
</style>